<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <script src="${pageContext.request.contextPath}/bootstrap/js/jquery-2.1.0.min.js"></script>
    <script src="${pageContext.request.contextPath}/bootstrap/js/bootstrap.min.js"></script>
    <style>

       .cus-container{
           width: 100%; /* 宽度自动适应页面 */
           margin: 0 auto; /* 居中显示 */
       }
       #user-add .modal-content{
           padding: 0 20px 20px;    
       }
       #user-edit .modal-content{
           padding: 0 20px 20px;    
       }
       
    </style>
</head>
<body>
	
    <div class="container cus-container">
		<!-- 添加用户模态框 -->
		<h3 class="text-center">添加用户</h3>

		<form action="${pageContext.request.contextPath}/user/insert" method="post" enctype="multipart/form-data" onsubmit="return validateForm()">
			<div class="form-group">
				<label for="username">姓名：</label>
				<input type="text" class="form-control" id="username" name="u_name" placeholder="请输入姓名" onblur="checkUsername()">
				<small id="username-error" class="text-danger" style="display: none;">用户名已存在，请重新输入！</small>
			</div>
			
			<div class="form-group">
				<label for="password">密码：</label>
				<input type="password" class="form-control" id="password" name="u_pass" placeholder="请输入姓名">
			</div>

			<div class="form-group">
				<label for="gender">性别：</label>
				<label class="radio-inline">
					<input type="radio" name="u_sex" id="gender" value="男"> 男
				</label>
				<label class="radio-inline">
					<input type="radio" name="u_sex" id="gender2" value="女"> 女
				</label>
			</div>
			
			<div class="form-group">
				<label for="birthday">出生日期：</label>
				<input type="date" class="form-control" name="u_birthday" id="birthday" placeholder="请输入出生日期">
			</div>

			<div class="form-group">
				<label for="email">邮箱：</label>
				<input type="text" class="form-control" name="u_email" id="email" placeholder="请输入邮箱">
			</div>
			<div class="form-group">
				<label for="phone">手机：</label>
				<input type="text" class="form-control" name="u_phone" id="phone" placeholder="请输入手机号">
			</div>
			<div class="form-group">
				<label for="image">上传图片：</label>
				<input type="file" class="form-control" name="image" id="image" multiple>
				<!-- 图片预览区域 -->
				<div id="image-preview" style="margin-top: 10px;"></div>
			</div>
			<div class="text-center">	                
				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
				<button type="submit" class="btn btn-primary">保存</button>
			</div>         
		</form>
    </div>
    
</body>
</html>

<script>
    // 图片上传预览功能
    document.getElementById('image').addEventListener('change', function(event) {
        var preview = document.getElementById('image-preview');
        preview.innerHTML = ''; // 清空之前的预览

        var files = event.target.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var reader = new FileReader();

            reader.onload = (function(file) {
                return function(e) {
                    var img = document.createElement('img');
                    img.src = e.target.result;
                    img.style.width = '100px';
                    img.style.height = '100px';
                    img.style.margin = '5px';
                    preview.appendChild(img);
                };
            })(file);

            reader.readAsDataURL(file);
        }
    });

    // 检查用户名是否重复
    function checkUsername() {
        var username = document.getElementById('username').value;
        if (username.trim() === '') return;

        $.ajax({
            url: '${pageContext.request.contextPath}/user/checkUsername',
            type: 'POST',
            data: { username: username },
            success: function(response) {
                if (response.exists) {
                    document.getElementById('username-error').style.display = 'block';
                    document.getElementById('username').focus();
                } else {
                    document.getElementById('username-error').style.display = 'none';
                }
            }
        });
    }

    // 表单提交验证
    function validateForm() {
        var username = document.getElementById('username').value;
        if (username.trim() === '') {
            alert('用户名不能为空！');
            return false;
        }

        var usernameExists = false;
        $.ajax({
            url: '${pageContext.request.contextPath}/user/checkUsername',
            type: 'POST',
            data: { username: username },
            async: false, // 同步请求
            success: function(response) {
                usernameExists = response.exists;
            }
        });

        if (usernameExists) {
            document.getElementById('username-error').style.display = 'block';
            document.getElementById('username').focus();
            return false;
        }

        return true;
    }
</script>